<template>
    <div class="loan-info-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="售后问题详情"
                  :left-options="{backText: '', preventGoBack:true}"
                  @on-click-back="goBackPage"
        ></x-header>

        <div class="list_mt_20" style="height: 100vh">
            <div class="questionDetail_list">
                <group label-width="6em">
                    <cell title="用户:"
                          align-items="flex-start"
                          value-align="left"
                          :value="title"
                    ></cell>

                    <cell title="登记人:"
                          align-items="flex-start"
                          value-align="left"
                          :value="recorder"
                    ></cell>
                    <cell title="编号:"
                          align-items="flex-start"
                          value-align="left"
                          :value="bizNum"
                    ></cell>
                    <cell title="情况描述:"
                          align-items="flex-start"
                          value-align="left"
                          :value="describe"
                    ></cell>
                    <!--<cell title="问题附件:"-->
                          <!--align-items="flex-start"-->
                          <!--value-align="left"-->
                          <!--value="无"-->
                    <!--&gt;</cell>-->
                </group>
                <!--//处理情况-->
                <group label-width="6em">
                    <div class="questionDetail_title">处理情况</div>
                    <div v-for="(item,index) in dealList">
                        <cell title="处理人:"
                              value-align="left"
                              align-items="flex-start"
                              :value="item.dealUser"
                        ></cell>
                        <cell title="处理日期:"
                              value-align="left"
                              align-items="flex-start"
                              :value="formatDateTime(item.dealDate)"
                        ></cell>
                        <cell title="处理情况:"
                              value-align="left"
                              align-items="flex-start"
                              :value="item.dealStatus"
                        ></cell>
                        <cell title="说明:"
                              value-align="left"
                              align-items="flex-start"
                              :value="item.dealExplain"
                        ></cell>
                        <hr v-if ="index != (dealList.length-1)"/>
                    </div>

                </group>
                <!--问题清单-->
                <!--<group label-width="6em">-->
                    <!--<div class="questionDetail_title">问题清单</div>-->
                    <!--<cell title="问题分析:"-->
                          <!--value-align="left"-->
                          <!--align-items="flex-start"-->
                          <!--:value="resume"-->
                    <!--&gt;</cell>-->

                <!--</group>-->
                <!--处理过程-->
                <!--<group label-width="15rem">-->
                    <!--<div class="questionDetail_title">处理过程</div>-->
                    <!--<cell title="2018/6/29/ 17:11:12;"-->
                          <!--value-align="left"-->
                          <!--align-items="flex-start"-->
                          <!--value="进行服务反馈"-->
                    <!--&gt;</cell>-->
                <!--</group>-->
            </div>

        </div>

    </div>
</template>

<script>
    /**
     *   我是问题详情
     */
    import {
        XHeader,
        Scroller,
        LoadMore,
        dateFormat,
        Cell,
        Group
    } from 'vux';

    import SysApi from '../../api/api'

    export default {
        name: 'questionList',
        components: {
            XHeader,
            Scroller,
            LoadMore,
            Cell,
            Group
        },
        data() {
            return {
                loadMoreText: "正在加载",
                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步
                results: [],
                value: '',

                onFetching: false,

                id: '',         //id
                cardId: '',     //身份证号

                bizNum:'',       // 编号
                recorder: '',   //登记人
                dealDate: '',   //终止时间
                dealExplain: '',//处理说明
                dealStatus: '', //处理状态
                describe: '',   //问题描述
                name: '',       //人员姓名
                phone: '',      //手机
                recordDate: '', //处理时间
                resume: '',     //问题摘要
                title: '',      //用户
                dealList:[]
            };
        },
        methods: {

            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            //初始化
            init() {
                let _this = this;
                let data = {
                    bizNum: _this.$route.query.bizNum
                };
                this.getListInfo(data);
            },
            getListInfo(data) {
                SysApi.bizDealLogInfo(data).then(
                    res => {
                        this.bizNum = res.data.bizNum;
                            this.cardId = res.data.cardId;
                            this.dealDate = res.data.dealDate;
                            this.dealExplain = res.data.dealExplain;
                            this.dealStatus = res.data.dealStatus;
                            this.describe = res.data.describe;
                            this.id = res.data.id;
                            this.name = res.data.name;
                            this.phone = res.data.phone;
                            this.recordDate = res.data.recordDate;
                            this.recorder = res.data.recorder;
                            this.resume = res.data.resume;
                            this.title = res.data.title;
                            this.bizNum = res.data.bizNum;
                            this.dealList = res.data.dealList;
                    }, error => {
                    }
                )
            },

            onSubmit() {
                this.$refs.search.setBlur()
                this.$vux.toast.show({
                    type: 'text',
                    position: 'top',
                    text: 'on submit'
                })

            },

            goBackPage() {
                this.$router.push({name:"index/questionList"});
            },
        },
        activated: function () {
            this.dealList =[];
            this.init();
        },

    };


</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .questionDetail_list {
        padding-bottom: 2rem;
        background-color: @color-background-default;
        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .vux-no-group-title {
            margin-top: 0;
        }
        .weui-cell {
            padding: 0.5rem 1.25rem;
        }
        .weui-cells {
            font-size: 12px;
        }
        .weui-cell:before {
            contain: none !important;
            border-top: none !important;
            height: 0;
        }
        .weui-cells:before {
            content: none;
        }
        .weui-cells:after {
            content: none;
        }
        .questionDetail_title {
            margin: 0 1rem;
            border-radius: 2px;
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            color: #fff;
            padding: 0.5rem 1.25rem;
            font-size: 14px;
        }
    }



</style>
